/* 
    Document   : main
    Created on : Apr 14, 2011, 8:03:13 AM
    Author     : l2qnew
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
color  {background: #f5f5f5 #f0f0f0 #666 #aaa #333 #345F89 #9C703B #eee; }
.left-side .gallery img { width: 128px; }
body { 
    margin: 0; padding: 0; color: #333;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    font-size: 12px; background: #f5f5f5;
}
input { border: 1px solid #d4d4d4; height: 25px;
       font-family: Tahoma,Arial,Helvetica,sans-serif;

}
a { color: #345F89; text-decoration: none;}
a:hover { color:#9C703B; text-decoration: none; }
.shadow-x {
    box-shadow :1px 1px 5px #d4d4d4;
}

/*Common style */
.radius-5px {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.radius-8px {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.bg-1 {background: #f5f5f5;}
.bg-2 { background: #f0f0f0;}
.content { width: 90%; margin: 0 auto;}
.selected { font-weight: bold;}

/*Icon style */
.home-icon { background: url('../images/home.png') no-repeat left center; padding-left: 18px; }
.people-icon {background: url('../images/users.png') no-repeat left center; padding-left: 18px;}
.contact-icon {background: url('../images/telephone.png') no-repeat left center; padding-left: 18px;}
.shop-cart-icon {background: url('../images/shopping_cart.png') no-repeat left center; padding-left: 18px;}
.login-icon, .logout-icon {background: url('../images/user.png') no-repeat left center; padding-left: 18px;}
.register-icon {background: url('../images/login.png') no-repeat left center; padding-left: 18px;}
.address-icon {background: url('../images/world_globe.png') no-repeat left center; padding-left: 18px;}
.phone-icon {background: url('../images/telephone.png') no-repeat left center; padding-left: 18px;}
.mail-icon {background: url('../images/email.png') no-repeat left center; padding-left: 18px;}
.chat-icon {background: url('../images/comment_bubble.png') no-repeat left center; padding-left: 18px;}

/*Header style*/
#header {
    border-bottom: 2px solid #eee; float: left;
    width: 100%; padding-bottom: 0; background: url('../images/nav1_bg.gif') repeat-x scroll 0 100% #666E73;
    border-bottom: 1px solid #2D444F;
    border-top: 1px solid #2D444F;
}
#header .logo { border: none; float: left; padding-top: 5px;}
/*#header ul {
    list-style: none; margin: 0; padding: 0; float: left;
}
#header ul li {
    display: inline; text-transform: uppercase;
    margin: 0; padding: 0; float: left; margin-left: 5px;
}
#header ul li a { padding: 10px; float: left; color: #666;}
#header ul li a.selected  { background: #fff;
-webkit-border-radius: 8px 8px  0 0;
    -moz-border-radius: 8px 8px  0 0;
    border-radius:8px 8px  0 0;
}
 #header ul li a:hover {
     background: #eee;
     -webkit-border-radius: 8px 8px  0 0;
    -moz-border-radius: 8px 8px  0 0;
    border-radius:8px 8px  0 0;
 }
#header ul li a span { }*/
#header .user-guide { float: right; padding: 8px; }

#container { float: left; width: 100%; clear: both; background: #fff;}
/*Container style*/
#navagation { border-bottom: 1px solid #eee; float: left;  width: 100%; height: 30px;line-height: 30px; clear: both; }
#navagation ul { float: left; list-style: none; margin: 0; padding: 0;}
#navagation ul li { display:  inline; float: left; color: #aaa; padding-right: 15px;  }

#navagation div { float: left;}
#navagation .user-guide { float: right;}
#navagation .user-guide span { float: right; padding-right: 5px;}
#navagation .user-guide ul { float: right;}
#navagation .user-guide ul li a { border-left: 1px solid #345F89; padding-left: 5px;}
#navagation .user-guide ul li { padding: 0 5px 0 0;}
#nav-container #nav-bar { border-top: none;}

/*Footer style*/
#footer { float: left; width: 100%; clear: both; border-top: 5px solid #eee;}
#footer ul { list-style: none; margin: 0; padding: 0; float: left; padding-bottom: 5px;}
#footer ul li { padding: 5px 0; color: #666;}
#footer div div { float: right;}
#footer p { clear: both; text-align: right; color: #aaa;  border-top:  1px  dashed #d4d4d4; padding-top: 5px;}
#main { clear: left; float: left; padding-top:10px; padding-bottom: 10px; width: 100%;}
#main .search-form-main { float: left; width: 47%; padding: 1% 1% 1% 2%;}
#main .search-form-main h2 { color: #345F89; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size: 16px; font-weight: bold;}
#main .search-form-main input { width: 90%; height: 40px;}
#main .search-form-main .desc { color: #aaa;}

#main-content { float: left; width: 100%; clear: both;}
/*Side bar style*/
.admin-m .portlet { background: #f5f5f5; border: 1px solid #eee; padding: 5px 10px; overflow: hidden; }
.admin-m .portlet-title {
    font-weight:  bold; color: #345F89; font-size: 14px;
    border-bottom: 2px solid #d4d4d4;
    padding-bottom: 7px;
}
.admin-m .portlet-content {}
.admin-m .portlet-content ul { list-style: none; margin: 0; padding: 0 0 10px 0; width: 100%; float: left;  }
.admin-m .portlet-content ul li { float: left; width: 100%; clear: both;}
.admin-m .portlet-content ul li a { width: 96%; float: left; padding: 7px 2%; border-bottom: 1px dashed #d4d4d4;}
.admin-m .portlet-content ul li a:hover { background: #fff; color: #333;}
.admin-m .portlet-decoration {}

.list-category .portlet {  padding: 5px 0; overflow: hidden; float: left; clear: both; width: 100%; }
.list-category  .portlet-title {
    font-weight:  bold; color: #333; font-size: 14px;
    border-bottom: 3px solid #333;
    padding-bottom: 7px; text-transform: uppercase;
}
.list-category .portlet-content {}
.list-category .portlet-content ul { }
.list-category .portlet-content ul li { }
.list-category .portlet-content ul li a { }
.list-category .portlet-content ul li a:hover { }
.list-category .portlet-decoration {}
/*Grid view*/
#main-content .grid-view {}
#main-content .grid-view table.items th {
    background: #345f89; color: #fff; text-align: left; padding-left: 8px;
    border: 1px solid #345f99;
}
#main-content .grid-view .button-column { width: 70px;}
#main-content .grid-view table.items th#yw0_c0 {}
#main-content .grid-view table.items th a { color: #fff; font-size: 12px;   }
#main-content .grid-view th a:hover { color: wheat;}
#main-content .grid-view {}
#main-content .grid-view table.items td { font-size: 12px; padding-left: 8px; border: 1px solid #eee; }
#main-content .grid-view table.items tr.even { background:#f5f5f5;}
#main-content .grid-view table.items tr.odd {background: #fff;}
#main-content .grid-view table.items tr.selected { background: #FFFF99; font-weight: normal;}
#main-content .grid-view table.items tr:hover { background: #FFFFEC;}
#main-content #user-grid_c0 { width: 30px;}

/*Form*/
.form { }
.form .row { float: left; clear: both; width: 96%; padding: 5px 2%;}
.form .row label { float: left; width: 100px; }
.form .row input { float: left; width: 250px; height: 25px;}
.form .row textarea {
    float: left; width: 400px; height: 100px; font-family:Tahoma,Arial,Helvetica,sans-serif;
    border: 1px solid #D4D4D4;
}
.form .row textarea.full-name {
     width: 250px; height: 24px; 
}
span.required { color: red; }
p.note { color: #999;}
.errorSummary { background: #FFD5D5; border:1px dashed #B30000; color: #B30000; padding: 5px 15px 10px 15px; margin-bottom: 10px;}
.errorSummary p { font-weight: bold;}
.errorSummary ul { list-style: none; margin: 0; padding: 0;}
.errorSummary ul li { padding: 5px 0 0 10px;}
input.error { background: #F5f5f5; border:1px dashed #B30000;}
.errorMessage {
    color: #B30000; font-size: 11px; margin-left: 10px; height: 19px;
    line-height: 19px; padding: 3px 10px; float: left; background: #FFD5D5;
}
.form .buttons input { 
    background: #F07824; color: #fff; font-weight: bold; border: none; width: auto;
    padding: 8px 30px; height: auto; margin-left: 100px;
}
/*View style */
.view-items { float: left; width: 100%;  padding: 7px 0;}
.view-items .img {
    float: left;  margin-left: 5px; padding: 3px; 
    width: 90px; height: 90px;box-shadow: 1px 1px 2px #D4D4D4;-webkit-border-radius: 5px;
    -moz-border-radius: 5px; margin-right: 2px;
    border-radius: 5px;
}
.view-items .img img { 
     width: 90px; }
.view-items .img:hover { box-shadow: 1px 1px 5px #333;}
.view-items .detail { float: left; margin-left: 10px;}
.view-items .detail p { margin-top: 0; margin-bottom: 10px;}
.view-items .detail p.first { margin-bottom: 15px;}
.view-items .detail p.first a { font-weight: bold; color:#345F89; font-size: 14px; }
.view-items .detail p.first a:hover { color: #9C703B;}
.view-items .detail p.last { margin-bottom: 0;}

h1 a { 
    float: right; font-size: 12px; font-weight: normal; padding-left: 20px;
    background: url('../images/fff/add.png') no-repeat; height: 16px; padding-right: 10px;
}
h1 a.lock-view {background: url('../images/fff/lock.png') no-repeat;}
h1 a.unlock-view {background: url('../images/fff/lock_open.png') no-repeat;}
h1 a.active-view {background: url('../images/fff/accept.png') no-repeat;}
h1 a.update-view {background: url('../images/fff/user_edit.png') no-repeat;}
h1 a.delete-view {background: url('../images/fff/delete.png') no-repeat;}
h1 span.note { float: right; font-size: 12px; font-weight: normal; color: #D4D4D4; height: 18px; line-height: 18px;}
.view-info { float: left;  width: 100%; }
.view-left { float: left; width: 140px; padding-top: 10px;}
.view-left  img { width: 128px;}
.view-right { float: left; color: #345F89; }
.view-right label { font-weight:  bold; color: #999; float: left; width: 130px; padding-right: 15px; text-align: right; }

.register, .login {  
    width: 60%; overflow: hidden; background: #F5f5f5;
    margin: 10px auto; padding: 30px; padding-top:5px;
    box-shadow :0 0 10px #d4d4d4;
}
.form .submit input { 
    background: #F07824; color: #fff; font-weight: bold; 
    width: auto; padding: 10px 30px;
    height: auto; box-shadow :0 0 5px #d4d4d4;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.left-side { 
    float: left; width: 200px; height: auto; border: 1px solid #D4D4D4; padding:10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.left-side ul { 
    margin: 0; padding: 0; list-style: none;
    border-top: 1px solid #d4d4d4; float: left; margin-top: 15px;
    padding-top: 5px;
}
.left-side ul li {
    padding: 5px 10px; width: 180px; border-bottom: 1px dashed #d4d4d4;
}
.right-side { float: left; margin-left: 30px; width: 500px;}
.right-side h2 { margin-top: 0; color: #345F89;}
.right-side table th { text-align: right;}
.profile-info tr {font-size: 12px; }
.profile-info tr th { padding-right: 14px;padding-bottom: 10px;}
.left-main {float: left;  width: 49%;}
.search-product { background: #f5f5f5; width: 96%; margin: 15px 0 19px 0; float: left; padding: 2%; box-shadow :0 0 5px #333;}
.search-product input { border: none; width: 90%; height: 34px; padding-left: 5px; font-size: 18px; color: #345F89;}
.search-product input.search-pro { width: auto; height: auto; float: right; padding-top: 5px;}
.search-bg { background: #fff; box-shadow :0 0 5px #d4d4d4; padding: 5px;}
.search-bg form { margin-bottom: 0;}
.list-product { float: right; width: 50%; }
.list-category .list-view .view { float: right; width: 100%; padding-bottom: 10px; border-bottom: 1px dashed #d4d4d4;}
.list-category .list-view .view .product-overview-image { float: left; width:25%; padding-top: 10px;}
.list-category .list-view .view .product-overview-description { float: left; width: 75%; }
.list-category .list-view .view .product-overview-description h3 a { font-size: 16px;}
.title-list-pro {
    font-weight:  bold; color: #333; font-size: 14px;
    border-bottom: 3px solid #333;
    padding-bottom: 7px; text-transform: uppercase;
}
.view-more { float: right; clear: both; height: auto;}
 .view-more a { 
     padding: 5px 10px; float: left;
    -webkit-border-radius: 5px; background: #333; color: #fff;
    -moz-border-radius: 5px;
    border-radius: 5px; box-shadow :1px 1px 5px #d4d4d4;
}
.view-more a:hover {
    background: #f5f5f5; color: #333; box-shadow :1px 1px 5px #333;
}
.list-category-2 { border: 1px dashed #d4d4d4; margin-bottom: 10px;}
.list-category-2 legend { padding: 5px 15px; border: 1px dashed #d4d4d4;}
.list-category-2 legend a { font-size: 14px; text-transform: uppercase; font-weight: bold; color: #333;}
.list-category-2 ul { list-style: none; margin: 7px 0; padding: 0; float: left;  }
.list-category-2 ul li { 
    display: inline; 
}
.list-category-2 ul li  a {
    float: left; padding: 5px 10px; background: #333; color: #fff;
    margin-left: 10px;   box-shadow :1px 1px 5px #d4d4d4; margin-bottom: 5px;
    -webkit-border-radius: 5px ;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.list-category-2 ul li  a:hover {
    background: #f5f5f5; color: #333;
    box-shadow :1px 1px 5px #333;}
.product-content { float: left; width: 60%;}
.product-content .product-images { float: left; }
.product-content .product-detail { float: left; width: 65%; }
.product-images img { padding: 5px; border: 1px solid #f5f5f5; margin: 0 10px 5px 0;}
.product-description { 
    border-top: 3px solid #D4D4D4; border-bottom: 1px dashed #d4d4d4; 
    margin-bottom: 15px;   
}
.product-content .supplier { float: left; padding: 3px 0; clear: both; }
.product-content .supplier label { width: 100px; float: left;}
.product-content .addtocart { 
    float: left; width: 100%; clear: both; border-top:  1px dashed #d4d4d4; margin-top: 5px;
    padding-top: 10px;
}
.btn-add-cart {
     padding: 5px 20px; font-weight: bold; border: none; height: auto;
    color: #fff; background:  #F07824;
}
.product-content h2 { 
    color: #345f89;
}
.supplier-of {
    float: right; width: 37%; border: 1px solid #d4d4d4; 
    padding: 1%; box-shadow :1px 1px 5px #d4d4d4; background:  #F5f5f5;
}
.distributor-detail {
    float: left; clear: both; width: 100%; margin-bottom: 15px; padding-top: 10px;
    border-top: 1px solid #D4D4D4;
}
.distributor-detail .img { float: left; padding-right: 10px;}
.distributor-detail .img img { float: left; width: 64px; }
.distributor-detail .desc { float: left; }
.distributor-detail .items-de {
    float: left; padding: 6px; background: #345f99; color: #fff;
    margin-right: 10px;  color: #eee; box-shadow :1px 1px 5px #333;
}
.distributor-detail .items-de b { font-size: 16px; color: #fff; }
.distributor-detail .price-unit { background: darkgreen;}
.distributor-name { margin-top: 0;}
.distributor-name a { font-weight: bold; color: #333;}
.amount-price { float: left; clear: both;}
.supplier-of .title { 
    color: #333; font-weight: bold; text-transform: uppercase; font-size: 16px;
    margin-top: 0;
}
.waypointarea { float: left; width: 100%; overflow: hidden;  }
.waypointarea span { 
    float: left; padding: 7px 15px; color: #d4d4d4; 
   
}
.waypointarea span.active { border-bottom: 4px solid #345f89; color: #345f89; padding-bottom: 7px;}
.shopping_cart { float: left; margin-top: 10px; border: 1px solid #ddd; border-top: none; border-right: none;}
.shopping_cart th {  padding: 8px 0; background: #f5f5f5; color: #345f89;  font-size: 14px; border: 1px solid #ddd; border-left: none; border-bottom: none;}
.shopping_cart td { padding: 5px; font-size: 14px; border-right: 1px solid #ddd;border-top: 1px solid #ddd;}
.price_total { 
    float: left; clear: both; padding: 8px 15px; line-height: 18px; 
    background: #666; color: #fff; box-shadow :1px 1px 5px #ddd; font-size: 14px;
}
.no-items { padding: 10px 2%; background:#F5f5f5; float: left; width: 96%; clear: both; color: #333; font-size: 14px; }
p.buttons { margin-top: 10px; float: right;}
p.buttons a { float: right; padding: 5px 15px; background: #F07824; color: #fff; font-weight: bold; font-size: 14px; box-shadow :1px 1px 5px #ddd;}
.choose-other-de {float: left; padding: 5px 10px; background: #F5f5f5; margin: 10px 0;}
.choose-other-de input { height: auto;}
hr { clear: both;}
.form fieldset { clear: both; border: none;}
.current_address .name { 
    padding: 5px 15px; border-bottom: 1px dashed #D4D4D4; font-size: 14px; color: #345f89;
    clear: both;
}
.current_address .name span {color: #333;}
.current_address .choose-other-de, .shipping-me .choose-other-de { background: #345F89; color:  #fff; font-size: 14px; font-weight: bold;}
.shipping-me { float: left; margin-left: 2%; width: 63% }
.shipping-me .desc { float: right;}
.shipping-me .row { clear: both; padding: 5px 10px; float: left;}
.shipping-me .row input { height: auto; }
.address-detail { float: left; width: 35%;}
.price-s { font-weight: bold; color: #F07824; font-size: 14px;}
#customer-form .buttons input { float: right; clear: both; 
                background: #F07824; font-size: 14px; font-weight: bold;
                padding: 8px 15px; height: auto; border: none; color: #fff;
}
.title-list-pro span { text-transform: lowercase; font-weight: normal; font-style: italic;  }
.result-row  { font-size: 12px; color: #666;  padding: 5px 5px 5px 0;
               border-bottom: 1px dashed #D4D4D4;
              -webkit-border-radius: 5px ;  clear: both; overflow: hidden;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.result-row:hover { background: #F5f5f5;}
.result-row p {  margin-top: 0; margin-bottom: 4px; }
.result-row p a { text-decoration: underline; font-size: 16px;}
.result-row p span { font-weight: bold; float: left; padding: 5px; background: #345F89; color: #fff;
    -webkit-border-radius: 5px ; 
    -moz-border-radius: 5px;
    border-radius: 5px; margin-right: 5px;
}
.result-row p span.package-type { background: green;}
.result-row p span.package-label { background: green; float: none;}
.result-row div { line-height: 20px; clear: both; float: left; padding: 3px 0 0 5px;}


.config-package { background: #f8f8f8;  padding: 5px 10px 10px 10px;box-shadow :1px 1px 5px #333; }
.config-package fieldset { border: none;}
.config-package fieldset legend { 
    color: #345f89;  font-size: 18px; font-weight: bold;
    padding: 5px 0 10px 0;
}
.config-package fieldset legend span { font-size: 14px; color: #666; font-weight: normal;}
.config-package fieldset .config { float: left; margin: 5px;  }
.config-package fieldset .config span { 
    float: left; padding: 8px; background: #345f89; font-weight: bold; font-size: 12px;
    -webkit-border-radius: 5px 0 0 5px ; color: #fff; text-transform: uppercase;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}
.config-package fieldset .config span.value {
    background: #fff; color: #345f89; box-shadow :1px 1px 5px #345f89;
    -webkit-border-radius: 0 5px  5px 0 ; 
    -moz-border-radius: 0 5px  5px 0;
    border-radius: 0 5px  5px 0;
}
.product-distributor fieldset { margin-top: 10px; border: 1px dashed #d4d4d4; }
.product-distributor fieldset legend { 
    border: 1px dashed #d4d4d4;  padding: 5px 15px; background: #f5f5f5;
    font-size: 16px; color: #333; font-weight: bold; text-transform: uppercase;
}
.package-a .detail { float: left; padding: 3px 5px; width: 40%; margin-left: 0;}

.view-dis, .hide-dis { background: #333; color: #fff; float:right; padding: 5px; cursor: pointer; }
.hide-dis { display: none;}
.product-overview-description h3 { margin-top: 0;}
.list-distributors .distributor-detail p { margin-top: 0;}
.list-distributors .distributor-detail { padding-top: 0; margin-bottom: 10px; border:none; padding-bottom: 5px; border-bottom: 1px dashed #d4d4d4;}
.price-cart { float: left; margin-right: 10px; }
.price-cart .price { 
    color: #F07824; padding: 4px; font-weight: bold; font-size: 16px;
    text-align: center; border: 1px solid #F07824; background: #fff;
}
.price-cart .price span { color: #666; font-size: 12px; font-weight: normal;}
.price-cart .add-to-cart { cursor: pointer; font-weight: bold; padding: 7px 5px;
              background: #F07824; color: #fff;  text-align: center;
}
.price-cart .add-to-cart:hover { background: green;}
.list-distributors { float: right; width: 57%; padding: 0 10px 0 10px; display: none;  }
.list-distributors .view-items { padding: 0;}
.product-distributor .product-overview-description h3 { font-size: 16px; text-decoration: underline;}
.product-distributor .product-overview-description h3 span { font-size: 12px; font-weight: normal;}
.product-distributor .product-overview-description .desc { font-size: 13px; color: #666; line-height: 20px; text-align: justify;}
.product-distributor .distributor-detail .distributor-name a { font-size: 15px; color: #345f89;  }
.product-distributor .distributor-detail .address { font-size: 13px; color: #666;}
.shopping_cart img {height: 32px; width: 32px;}
.product-overview-description .desc { font-size: 13px; color: #666;}
.login { width: 40%;}
.login .form .row input {
    height: 40px; font-size: 16px; color: #333; padding-left: 5px;
    -webkit-border-radius: 5px ; 
    -moz-border-radius: 5px;
    border-radius: 5px;box-shadow :1px 1px 5px #ddd;
}
#reg { cursor: pointer;}
.login .form .submit input { color: #fff; padding-left: 30px;}
.reg-option {
    display: none;
    position: absolute;top: 40px; padding: 5px 10px;
    width: auto; background: #eee; color: #345f89; 
    -webkit-border-radius: 5px ; 
    -moz-border-radius: 5px;
    border-radius: 5px;box-shadow :1px 1px 5px #ddd;
}

.reg-option a { float: left; clear: both; padding: 5px 10px;}
.reg-option a:hover { background: #345f89; color: #fff; }
.success { 
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #4F8A10;
    background-color: #DFF2BF;
}
.pager { float: right; clear: both; margin-top: 15px;}
.package-new { float: left; width: 100%}
.package-label {float: left; width: 100px;}
.pakage-create { float: left; width: 100%; overflow: hidden;}
.pack-abc { float: left; width: 46%;}
.package-right { float: right; width: 50%;}
.package-right .list-product{ width: 100%;}
.package-right .search-product { margin-top: 0;}
#package-product { clear: both; padding: 5px 15px; float: left; 
                   background: #333; color: #fff;
                   font-weight: bold;
}
.add-items { 
    float: left; width: 100%; padding-top: 5px; padding-bottom: 5px;
    margin-bottom: 5px; background: #f5f5f5;
      -webkit-border-radius: 5px ; 
    -moz-border-radius: 5px;
    border-radius: 5px;box-shadow :1px 1px 5px #ddd;
}